<template>
	<view class="verificationRecordPage">
		<view class="month flex-end">
			<!-- <picker mode="date" :value="date" :fields="currentTimeFn(currentTime)" :start="startDate" :end="endDate"
				@change="bindDateChange">
				<view class="flex-align-center-justify-start  color6">
					{{ yeartime }}
					<text>-</text>
					{{ monthtime }}
					<uni-icons type="down" color='#333' size="16"></uni-icons>
				

				</view>

			</picker> -->
		</view>
		<mescroll-body ref="mescrollRef" :height="windowHeight+'rpx'" @init="mescrollInit" @down="downCallback"
			@up="upCallback" :up="upOption" :down="downOption">
			<block v-for="(item,index) in list">
				<view class="verificationRecordList margin-top_30rpx">
					<view class="flex-between  font-weight_bold margin-bottom_30rpx">
						<view class="font-size_32rpx">
							套餐卡价格：{{item.price?item.price:'--'}}
						</view>
						<view class="font-size_32rpx">
							1
						</view>
					</view>
					
					<view class="flex-between  margin-bottom_20rpx" style="color: rgb(117, 117, 117);">
						<view class="flex">
							用户：<image class="userIcon" :src="item.logo" mode=""></image>{{item.nickname}}
						</view>
						<view class="">
							核销次数
						</view>
					</view>

					<view class="flex-between margin-bottom_20rpx" style="color: rgb(117, 117, 117);">
						<view class="">
							剩余核销次数：{{item.num}}
						</view>
                        <view class="">
                        	已核销次数：{{item.total_num-item.num}}
                        </view>
					</view>
					<view class="flex-between margin-bottom_20rpx" style="color: rgb(117, 117, 117);">
						<view class="">
							核销套餐卡名称：{{item.package_name}}
						</view>

					</view>
					<view class="flex-between " style="color: rgb(117, 117, 117);">
						<view class="">
							操作时间：{{item.create_time}}
						</view>

					</view>
				</view>
			</block>
		</mescroll-body>

	</view>
</template>

<script>
	export default {
		components: {

		},
		data() {
			const currentDate = this.getDate({
				format: true
			});
			return {
				tabIndex: 4,
				navIndex: 0,
				currentIndex: 0,
				tabList: [{
					name: '已使用',
					id: '1' //null
				}, {
					name: '已过期',
					id: '2' //null
				}, ],
				currentTime: '2',
				downOption: {
					auto: true
				},
				// 上拉配置项
				upOption: {
					auto: true
				},
				token: uni.getStorageSync('login').token,
				windowHeight: '',
				list: [],
				yeartime: currentDate.split('-')[0],
				//选择的月份
				monthtime: currentDate.split('-')[1],
				//选择的天数
				daytime: currentDate.split('-')[2],
				date: null,
				orderStatusArr: [{
						value: '全部'
					},
					{
						value: '积分'
					},
					{
						value: '佣金'
					},

				],
				id:''

			}
		},
		onLoad(options) {
		
			uni.getSystemInfo({
				success: (res) => {
					this.windowHeight = res.windowHeight * 2 - 800;
				}
			});
		},
		onShow() {
			this.$nextTick(()=>{
				this.mescroll?.resetUpScroll();
			})

		},
		methods: {
			async upCallback(scroll) {
			
				const result = await this.$http.post({
					url: this.$api.packageUseLog,
					data: {
						page: scroll.num,
						limit: 10,
					
						
					},
					headers: {
						'Authorization': `Bearer ${this.token}`
					}
			
				})
				if (result.code == 0) {
					console.log('地址管理列表', result);
					this.mescroll.endByPage(result.data.list.length, this.$sun.pagingSum(result.data.count, 10));
					if (scroll.num == 1) this.list = [];
					this.list = this.list.concat(result.data.list);
					console.log('this.list', this.list, this.list.length);
				}
			},
			getChange(index) {
				console.log(index)
				this.navIndex = index
			},
			switchTimeTab(index) {

				this.currentIndex = index;


			},
			// 日期获取
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;

				return `${year}-${month}-${day}`;

			},

			bindDateChange(e) {


				this.createTime = e.detail.value
				this.date = e.target.value;
				/* 在上面声明变量，split是用来截取字段*/
				this.yeartime = this.date.split('-')[0];
				this.monthtime = this.date.split('-')[1];
				this.daytime = this.date.split('-')[2];


			},
		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			currentTimeFn() {
				return function(currentIndex) {
					if (currentIndex == '1') {
						// 日
						return 'day';

					} else if (currentIndex == '2') {
						// 月
						return 'month';
					} else if (currentIndex == '3') {
						// 年
						return 'year';
					}
				};
			}




		},
	}
</script>

<style lang="less" scoped>
	.verificationRecordPage {
		padding: 24rpx;

		.verificationRecordList {
			.userIcon{
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				margin-right: 8rpx;
			}
			padding: 24rpx;

			border-radius: 10rpx;

			background: rgb(255, 255, 255);
		}
	}

	page {
		background: #f6f6f6;
	}

	.revenueRecordsNav {
		width: 375px;
		height: 50px;
		background: rgb(255, 255, 255);

		.pointHead {
			padding: 50rpx 20rpx;

			.month {
				width: 85px;
				height: 28px;
				border-radius: 200rpx;
				background: #E7E7E7;
				color: #fff;
				text-align: center;
				line-height: 28px;
				color: #333;
			}

			.selectTime {

				.tab {
					margin-left: 20rpx;
					list-style-type: none;
					display: block;
					width: 108rpx;
					height: 50rpx;
					line-height: 50rpx;
					text-align: center;
					background: rgb(235, 234, 234);

				}

				.active {
					width: 108rpx;
					height: 50rpx;

					background: rgb(232, 202, 148);
					;
					color: rgb(122, 85, 32);
					text-align: center;
					line-height: 50rpx;
				}

				.orderStatus {
					width: 90px;
					height: 50rpx;
					text-align: center;
					line-height: 50rpx;
					font-weight: 700;

				}




			}

		}

		.recordsContainer {
			padding: 40rpx 20rpx;
			background-color: #fff;

			.recordsList {
				padding-bottom: 30rpx;
				margin-top: 30rpx;
				border-bottom: 1px solid rgb(236, 235, 235);

				.avatar {
					width: 44px;
					height: 44px;
				}
			}
		}

	}
</style>